<template>
	<view class="demo">
		<!-- navBar -->
		<!-- <view class="d_navBar">
			<nav-bar background="transparent" isBack backColor="#fff"></nav-bar>
			
		</view> -->
		<view class="d_navBar">
			<!-- <nav-bar background="transparent" isBack backColor="#fff"></nav-bar> -->
			<nav-bars ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#FFF" type="transparentFixed"
				:title="titleText">
			</nav-bars>
		</view>
		
		<!-- banner -->
		<view class="d_banner">
			<!-- <view class="i_tBtn" @click="dviewr(info.display_url)" v-if="info.display_url">
				<view class="i_tbImg"><image src="@/static/home/3d.png"></image></view>
				<view class="i_tbTxt">3D</view>
			</view> -->
			<swiper class="swiper" autoplay interval="4200" duration="300" @change='bannerChange'>
				<view v-if="info.thumb_url.length>1">
					<swiper-item v-for="(item,index) in info.thumb_url" :key="index">
						<view class="d_bItem">
							<image :src="item.path"></image>
						</view>
					</swiper-item>
				</view>
				<view v-else>
					<swiper-item>
						<view class="d_bItem">
							<image :src="info.thumb_url.path || 'https://cos.ryz1620.com/liankun/static/IMG279.png'"></image>
						</view>
					</swiper-item>
				</view>
			</swiper>
			<view class="d_bDots">
				<view v-for="(item, index) in info.thumb_url" :key="index">
					<view class="d_bDot" :class="{'active': index == bannerIndex}" >
						<view class="d_bIcon"></view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 内容 -->
		<view class="d_content">
			<view class="d_cTitle">{{info.title}}</view>
			<view class="d_cInfo">
				<text class="pR-32">报价：{{info.offer}}万</text>
				<text>{{info.area}}m² | {{info.design_style[0].name}}</text>
			</view>
			<view class="d_cUser">
				<view class="d_cuHeadimg"><image :src="info.avatar.path || 'https://cos.ryz1620.com/liankun/static/IMG280.png'"></image></view>
				<view class="d_cuFocus" @tap="focusSDesigner">
					<view class="d_cuBtn" :class="{'active': isFocus}">{{isFocus ? '已关注' : '+关注'}}</view>
				</view>
				<view class="d_cuCont">
					<view class="d_cuName omit-1">{{info.decoration_name||'*****'}}</view>
					<view class="d_cuFans">{{info.fans_num||'0'}}人关注</view>
				</view>
			</view>
			<view class="d_cTextarea">
				<!-- 标签：d_ctTit/d_ctTxt/d_ctImg -->
				<!-- <view class="d_ctTit">业主诉求</view>
				<view class="d_ctTxt">卫生间空间比较大，相反厨房空间反而不够用，需要在格局上进行调整，满足屋主的使用需求。</view>
				<view class="d_ctImg"></view> -->
				<view class="d_ctTxt">
					<!-- <rich-text :nodes="details | formatRichText" selectable='true'></rich-text> -->
					<u-parse :html="details | formatRichText"></u-parse>
				</view>
				<!-- <view class="d_ctShop" @tap="toPage('demo_shop')">
					<view class="d_ctShop-icon"><image src="/static/common/icon_more.png"></image></view>
					<view class="d_ctShop-txt">包含商品({{info.product.length}}):</view>
					<view class="d_ctShop-imgs">
						<view class="d_ctShop-img" v-for="(item,index) in info.product" v-if="index<4">
							<image :src="item.main_imgurl.path"></image>
						</view>
					</view>
				</view> -->
				<view class="d_cAuth">
					<view class="d_caTxt">创建于 {{time |formatDate}}</view>
					<view class="d_caTxt">文章由作者自行上传，仅代表作者本人观点。</view>
				</view>
			</view>
		</view>
		
		<!-- 评论 -->
		<view class="d_evaluate">
			<view class="d_eTitle">评论<text>({{info.comment_num}})</text></view>
			<view class="d_eList">
				<view v-for="(comment,index) in commentList" :key="index">
					<view class="d_eItem">
						<view class="d_eHead" v-if="comment.user_id.avatar.path"><image :src="comment.user_id.avatar.path"></image></view>
						<view class="d_eHead" v-else><image src="https://manager.ryz1620.com/static/my/avator.png"></image></view>
						<view class="d_eCont">
							<view @tap="dync_commentSelectReply(comment.id, comment.user_id.username)">
								<view class="d_eName">{{comment.user_id.username}}
									<!-- <view class="d_eAuth">作者</view> -->
								</view>
								<view class="d_eTxt">{{comment.content}}</view>
								<view class="d_eTxt">
									<view class="d_eTip" style="padding-left: 0;">{{comment.createTime}}</view>
									<view class="d_eTip" @tap.top="getcommentdel(comment.id)" v-if="comment.user_id.id == useid">删除</view>
									<view class="d_eTip" v-else style="color: #333;">回复</view>
							    </view>
							</view>
							<view class="d_eIts">
								<view v-for="reply in comment.sub_reply" :key="reply.id">
									<view class="d_eiItem" @tap="dync_commentSelectReply(reply.id, reply.user_id.username)">
										<view class="d_eiHead" v-if="reply.user_id.avatar.path"><image :src="reply.user_id.avatar.path"></image></view>
										<view class="d_eiHead" v-else><image src="https://manager.ryz1620.com/static/my/avator.png"></image></view>
										<view class="d_eiCont">
											<view class="d_eiName">{{reply.user_id.username}}</view>
											<view class="d_eiTxt">
												<view v-if="reply.isReplay" style="color: #666; font-size: 20rpx;">
													回复<text class="d_eiReply">{{reply.reply_id.username}}</text>：
												</view>
												{{reply.content}}
											</view>
											<view class="d_eiTxt">
												<view class="d_eiTip">{{reply.createTime}}</view>
												<view class="d_eiTip" @tap.top="getcommentdel(reply.id)" v-if="reply.user_id.id == useid">删除</view>
												<view class="d_eiTip" v-else style="color: #333;">回复</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	
		<!-- 评论框 -->
		<view class="d_talk">
			<view class="d_tShim"></view>
			<view class="d_tBox">
				<view class="d_tFuns">
					<view class="d_tFun" @click="is_show_model=true">
						<view class="d_tIcon iconfont icon-transpond"></view>
						<view class="d_tTxt">转发</view>
					</view>
					<view class="d_tFun" @click="trendStore(info)">
						<view class="d_tIcon" v-if="info.support_status == 1"><image src="/static/common/icon_collection.png"></image></view>
						<view class="d_tIcon" v-else><image src="/static/common/icon_collection2.png"></image></view>
						<view class="d_tTxt">{{info.support_num}}</view>
					</view>
				</view>
				<!-- <view class="d_tInput"><input type="text" v-model="comment" @confirm="commentAuth" placeholder="评论一下吧~" placeholder-class="placeholder"/></view> -->
				<view class="d_tInput" v-if="!commentReplyName"><input  type="text" placeholder-class="placeholder" :focus="commentFocus" v-model="content" 
								:placeholder="commentReplyName ? '回复 @' + commentReplyName + ':' : '评论一下吧~'"
								@confirm="dync_comment"
								@input="inputKey($event, 'comment')" />
				</view>
				<view class="d_tInput" v-else>
					<input  type="text" placeholder-class="placeholder" :focus="commentFocus" v-model="content"
									:placeholder="commentReplyName ? '回复 @' + commentReplyName + ':' : '评论一下吧~'"
									@confirm="dync_commentReply"
									@input="inputKey($event, 'comment')" />
				</view>
			</view>
		</view>
		
		<!-- 浮窗按钮 -->
		<!-- <view class="d_fixed">
			<view class="d_fBtn" @tap="toPage('demo_shop')">
				<view class="d_fcIcon"><image src="/static/common/icon_fixed2.png"></image></view>
				<view class="d_fcTxt">清单</view>
			</view>
			<view class="d_fBtn" @tap="popCatalog = true">
				<view class="d_fcIcon"><image src="/static/common/icon_fixed1.png"></image></view>
				<view class="d_fcTxt">目录</view>
			</view>
		</view> -->
		
		<!--模态弹窗-->
		<view class="cu-modal bottom-modal" :class="[is_show_model?'show':'']" @click.stop="is_show_model=false">
		  <view class="cu-dialog bottom-md" style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;" @click.stop="">
			<view class="md-content">
			  <view class="md-content-item">
				<view class="s_bIcon iconfont icon-friend"></view>
				<view>分享给好友</view>
				<button open-type="share" @click="is_show_model=false" class="sharebtn"></button>
			  </view>
			  <view class="md-content-item" @click="popShareToPicture">
				<view class="s_bIcon s_bIcons iconfont icon-picture"></view>
				<view>生成分享大图</view>
			  </view>
			</view>
			<view class="cancel" @click="is_show_model=false">取消</view>
		  </view>
		</view>
		
		<!-- 目录 -->
		<view class="d_catalog" :class="{'active': popCatalog}">
			<view class="d_cBg"></view>
			<view class="d_cContain">
				<view class="d_cShade" @tap="popCatalog = false"></view>
				<view class="d_cBox">
					<view class="d_cClose" @tap="popCatalog = false">
						<view class="iconfont icon-cancel"></view>
					</view>
					<view class="d_cTitle">目录</view>
					<view class="d_cList">
						<view class="d_cItem">
							<view class="d_cArrow"><view class="iconfont icon-more"></view></view>
							<view class="d_cName">业主诉求</view>
						</view>
						<view class="d_cItem">
							<view class="d_cArrow"><view class="iconfont icon-more"></view></view>
							<view class="d_cName">设计方案</view>
						</view>
						<view class="d_cItem">
							<view class="d_cArrow"><view class="iconfont icon-more"></view></view>
							<view class="d_cName">户型图</view>
							<view class="d_cImgs">
								<view class="d_cImg"></view>
							</view>
						</view>
						<view class="d_cItem">
							<view class="d_cArrow"><view class="iconfont icon-more"></view></view>
							<view class="d_cName">卫生间</view>
							<view class="d_cImgs">
								<view class="d_cImg"></view>
								<view class="d_cImg"></view>
							</view>
						</view>
						<view class="d_cItem">
							<view class="d_cArrow"><view class="iconfont icon-more"></view></view>
							<view class="d_cName">厨房</view>
							<view class="d_cImgs">
								<view class="d_cImg"></view>
								<view class="d_cImg"></view>
								<view class="d_cImg"></view>
								<view class="d_cImg"></view>
								<view class="d_cImg"></view>
								<view class="d_cImg"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// import navBar from "@/components/navBar/navBar"
import service_design from '@/service/team.js'
import service_mall from '@/service/mall.js'
import service_decoration from '@/service/decoration.js'
	
export default {
	data() {
		return {
			// 关注
			isFocus: false,      // 是否关注该设计师
			caseId: null,
			isSupport: false,
			info: null,
			popShare: false,     // 弹窗-分享
			popCatalog: false,   // 弹窗-目录
			// 评论
			// 评论
			commentPage:0,
			commentTime: 0,
			commentList: [],
			comment: '',
			replyId: null,
			content:'',
			useid:'',
			commentIsReply:false,
			commentLoading: false,
			commentReplyId:'',
			commentReplyName:'',
			// 轮播图
			bannerIndex: 0,
			bannerCurrent: 0,
			details:'',
			time:'',
			userId :'',
			is_show_model: false,//是否显示分享模态窗
			scrollTop: 0,
			titleText: ''
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
		if (e.scrollTop >= 100) {
			this.titleText = '案例详情'
		} else {
			this.titleText = ''
		}
	},
	// components: { navBar },
	
	onLoad(params) {
		this.$utils.getUrl()
		let scene = decodeURIComponent(params.scene);
		let token = uni.getStorageSync('token')
		scene = scene.split("&");
		let obj = {}
		for(let i = 0;i<scene.length;i++){
			let newscene = scene[i].split("=");
			obj[newscene[0]] = newscene[1];
		}
		if(obj.caseId){
			this.caseId = obj.caseId
			this.getDetail(obj.caseId)
			
		}else{
			this.caseId = params.caseId
			this.getDetail(params.caseId)
		}
		if(params.share_uid){
			let shareuId= params.share_uid
			this.$store.commit('index/SET_shareuId', shareuId)
			if(token && shareuId){
				service_mall.getPromoter({share_uid:shareuId})
					.then(res => {
				})
			}
		}
		if(obj.share_uid){
			let shareuId= obj.share_uid
			this.$store.commit('index/SET_shareuId', shareuId)
			if(token && shareuId){
				service_mall.getPromoter({share_uid:shareuId})
					.then(res => {
				})
			}
		}
		this.dyna_getComment()
		this.gettrace()
		this.userId = uni.getStorageSync('userId')
	},
	onShareAppMessage(res) {
		// let that = this
		if (res.from === 'button') {}
		this.getgetforwards()
		return {
		  title: this.info.title,
		  path: '/pages_design/pages/design/demo/demo?caseId=' + this.caseId +'&share_uid='+ this.userId,
		  success: function (res) {
				console.log(res,'111')
		  },
		}  
	},
	filters: {
		formatRichText (html) { //控制小程序中图片大小
			let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			});
			newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
				match = match.replace(/width:[^;]+;/gi, 'max-width:100%;width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;width:100%;');
				return match;
			});
			newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			newContent = newContent.replace(/\<img/gi, '<img style="width:100%;max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
			return newContent;
		},
		formatDate(value) {
			let date = new Date(parseInt(value) * 1000);
			let y = date.getFullYear();
			let m = date.getMonth() + 1;
			m = m < 10 ? "0" + m : m;
			let d = date.getDate();
			d = d < 10 ? "0" + d : d;
			let h = date.getHours();
			h = h < 10 ? "0" + h : h;
			let minute = date.getMinutes();
			let second = date.getSeconds();
			minute = minute < 10 ? "0" + minute : minute;
			second = second < 10 ? "0" + second : second;
			return y +"-" + m + "-" + d + " " + h + ":" + minute + ":"+second;
		}	
	},
	methods: {
		// 记录足迹
		gettrace() {
			service_design.gettrace({ case_id:this.caseId})
				.then(res => {
			})
		},
		// 转发
		getgetforwards() {
			service_design.getforward({ case_id:this.caseId})
				.then(res => {
					console.log(res,'转发结果')
			})
		},
		dviewr(item){
			let url = encodeURIComponent(item)
			uni.navigateTo({
				url: '/pages_3D/pages/3D/panorama?url='+ url 
			});
		},
		// 关注or取消关注
		focusSDesigner() {
			let follow = this.isFocus
			if(follow != 0){
				this.type = 0
				uni.showModal({
				    title: '提示',
				    content: '确认取消关注?',
				    success:  (res) => {
				        if (res.confirm) {
						service_decoration.focusDecoration({ decoration_id: this.info.decoration_id, status:0 })
							.then(res => {
								if (res.code == 1) {
									this.isFocus = this.type == 1 
								}
								else {
									this.$utils.showErr({ title: res.msg })
								}
							})
						this.popFocus = false	
								
				        } else if (res.cancel) {
							return
				        }
				    }
				});
			}else{
				this.type = 1
				service_decoration.focusDecoration({ decoration_id: this.info.decoration_id, status:1 })
					.then(res => {
						if (res.code == 1) {
							this.isFocus = this.type == 1 
						}
						else {
							this.$utils.showErr({ title: res.msg })
						}
					})
				this.popFocus = false
			}
				
		},
		// 获取详情数据
		getDetail(caseId) {
			service_decoration.buildCaseDetail({case_id:caseId})
				.then(res => {
					if (res.code == 1) {
						let data = res.data
						this.info = data
						this.isFocus = data.follow_status == 1 ? true : false 
						this.details = data.content
						this.time = data.create_time
					}
				})
		},
		// 案例点赞
		trendStore(item) {
			let status = item.support_status
			if(status == 1){
				uni.showModal({
				    title: '提示',
				    content: '确认取消点赞?',
				    success:  (res) => {
				        if (res.confirm) {
						service_design.supportDemo({case_id:this.caseId, status:0 })
							.then(res => {
								if (res.code == 1) {
									this.info.support_status = 0
									this.info.support_num--
								}
								else {
									this.$utils.showErr({ title: res.msg })
								}
							})		
				        } else if (res.cancel) {
							return
				        }
				    }
				});
			}else{
				service_design.supportDemo({ case_id: this.caseId, status:1})
					.then(res => {
						if (res.code == 1) {
							this.info.support_status = 1
							this.info.support_num++
						}
						else {
							this.$utils.showErr({ title: res.msg })
						}
					})
		
			}
				
		},
		// 输入框输入内容事件
		inputKey(event, key) {
			this[key] = event.detail.value
		},
		moveHandle() {},
		// 获取设计动态的评价内容
		dyna_getComment() {
				this.commentTime++
				let commentTime = this.commentTime
				let commentPage = this.commentPage + 1
				// 获取评论数据
				service_design.getDemoComment({ case_id: this.caseId, page: commentPage })
					.then(res => {
						if (this.commentTime === commentTime) { 
							
							if (res.code == 1) {
								let data = res.data
								let list = this.v|| []
								// 处理数据
								let nowTime = Date.now()
								for (let i = 0; i < data.length; i++) {
									data[i].create_time *= 1000
									data[i].createTime = this.$utils.getDateDiff(data[i].create_time)
									// 处理回复数据
									let replayList = data[i].sub_reply
									if (replayList && replayList.length) {
										for (let j = 0; j < replayList.length; j++) {
											replayList[j].create_time *= 1000
											replayList[j].createTime = this.$utils.getDateDiff(replayList[j].create_time,)
											
											// 是否是回复 回复数据 的数据
											if (data[i].id !== replayList[j].parent_id) replayList[j].isReplay = true
										}
									}
									// 保存数据
									list.push(data[i])
								}
								
								this.commentPage++
								this.commentList = list
							}
						}
					})
					.catch(err => {
						if (this.commentTime === commentTime) {
							this.commentLoading = false
						}
					})
		},
		// 评论
		dync_comment() {
			let content = this.content
			service_design.commentDemo({ case_id: this.caseId, content: content })
				.then(res => {
					if (res.code == 1) {
						this.TrendPage = 0
						this.commentPage = 0
						this.commentList = []
						this.case_idnum++
						this.content = ''
						this.dyna_getComment()
						this.getDetail()
					}else {
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel:false,
								success(res) {
									if (res.confirm) {
										// console.log('用户点击确定')
										this.content = ''
										content = ''
									} 
								}
							})

						}
				})
				.catch(err => {
					
				})
		},
		// 回复他人评论
		dync_commentSelectReply(id,name) {
			this.commentIsReply = true
			this.commentReplyId = id
			this.commentReplyName = name
			this.content = ''
		},
		// 发布回复评论
		dync_commentReply(){
			service_design.replyDemo({ comment_id: this.commentReplyId, content: this.content })
				.then(res => {
					if (res.code == 1) {
						this.commentIsReply = false
						this.commentPage = 0
						this.commentList = []
						this.commentReplyId = ''
						this.commentReplyName = ''
						this.content = ''
						this.dyna_getComment()
					}else {
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel:false,
								success(res) {
									if (res.confirm) {
										// console.log('用户点击确定')
										this.content = ''
										content = ''
									} 
								}
							})

						}
				})
				.catch(err => {
					
			})
		},
		// 获取更多评论内容
		dync_commentNext(e) {
			this.dyna_getComment()
		},
		// 删除评论
		getcommentdel(id){
			uni.showModal({
			    title: '提示',
			    content: '确认删除评论?',
			    success:  (res) => {
			        if (res.confirm) {
					service_design.replyDemodel({comment_id: id})
						.then(res => {
							if (res.code == 1) {
								this.TrendPage = 0
								this.commentPage = 0
								this.commentList = []
								this.case_idnum--
								this.content = ''
								this.dyna_getComment()
								this.getTrend()
							}
							else {
								this.$utils.showErr({ title: res.msg })
							}
						})		
			        } else if (res.cancel) {
						return
			        }
			    }
			});
		},
		
		// toPage(page) {
		// 	if (page === 'demo_shop') {
		// 		uni.navigateTo({ url: '/pages_design/pages/design/demo/shop?caseId=' + this.caseId })
		// 	}
		// 	else if (page === 'demo_share') {
		// 		uni.navigateTo({ url: '/pages_design/pages/design/demo/share?caseId=' + this.caseId })
		// 	}
		// },
		
		// 轮播图
		bannerChange(e) {
			this.bannerIndex = e.detail.current
		},
		// 关闭弹窗
		popShareClose() {
			this.popShare = false
		},
		// 跳转-海报页面
		popShareToPicture() {
			uni.navigateTo({ url: '/pages_decoration/pages/decoration/buildCase/share?caseId=' + this.caseId })
		}

	}
}
</script>

<style lang="scss" scoped>
.demo {
	// navBar=====
	.d_navBar {height: 0;position: relative;z-index: 500;}
		
	// banner=====
	.d_banner {height: 500rpx;background: #f0f0f0;position: relative;z-index: 1;
		.d_bItem {width: 100%;height: 100%;position: relative;}
		.d_bTag {height: 58rpx;line-height: 58rpx;color: #fff;font-size: 24rpx;padding: 0 24rpx;border-radius: 28rpx;background: rgba(51, 51, 51, .8);position: absolute;bottom: 78rpx;right: 36rpx;}
		.d_bDots {width: 100%;position: absolute;bottom: 66rpx;left: 0;display: flex;justify-content: center;}
		.d_bDot {width: 24rpx;height: 36rpx;
			&.active .d_bIcon {background: #ffd425;}
			.d_bIcon {width: 12rpx;height: 12rpx;margin: 12rpx auto 0;border-radius: 50%;background: rgba(255, 255, 255, .5);}
		}
	}

	// 内容=====
	.d_content {padding: 40rpx 0;margin-top: -58rpx;border-radius: 20rpx;background: #fff;position: relative;z-index: 2;
		.d_cTitle {min-height: 56rpx;line-height: 56rpx;font-size: 40rpx;font-weight: bold;padding: 0 32rpx;}
		.d_cInfo {min-height: 34rpx;line-height: 34rpx;color: #939393;font-size: 24rpx;padding: 0 36rpx;margin-top: 20rpx;}
		// 用户信息
		.d_cUser {height: 128rpx;margin: 60rpx 32rpx 0;border-radius: 64rpx;background: #f9f6f3;}
		.d_cuHeadimg {width: 88rpx;height: 88rpx;margin: 20rpx 16rpx 0 20rpx;border-radius: 50%;background: #f0f0f0;float: left;overflow: hidden;}
		.d_cuFocus {height: 128rpx;padding: 0 40rpx 0 28rpx;float: right;}
		.d_cuBtn {width: 136rpx;height: 48rpx;text-align: center;line-height: 48rpx;color: #fff;font-size: 20rpx;margin-top: 40rpx;border-radius: 28rpx;background: #333;position: relative;box-sizing: border-box;
			// &::before, &::after {content: "";width: 2rpx;height: 12rpx;border-radius: 4rpx;background: #fff;position: absolute;top: 50%;left: 36rpx;transform: translateY(-50%);}
			// &::after {transform: translateY(-50%) rotate(90deg);transform-origin: 50% 50%;}
		}
		.d_cuBtn.active{
			background: #dedede;
			
		}
		.d_cuCont {padding-top: 26rpx;overflow: hidden;}
		.d_cuName {height: 44rpx;line-height: 44rpx;font-size: 32rpx;}
		.d_cuFans {height: 34rpx;line-height: 34rpx;color: #939393;font-size: 24rpx;}
		// 富文本内容
		.d_ctTit {line-height: 50rpx;font-size: 36rpx;font-weight: bold;padding: 0 32rpx;margin-top: 60rpx;}
		.d_ctTxt {line-height: 44rpx;padding: 0 36rpx;margin-top: 28rpx;}
		.d_ctImg {height: 376rpx;margin: 28rpx 32rpx 0;border-radius: 8rpx;background: #f0f0f0;overflow: hidden;}
		.d_ctShop {height: 106rpx;line-height: 106rpx;font-weight: bold;padding: 0 64rpx 0 40rpx;margin: 28rpx 32rpx 0;border-radius: 10rpx;background: #f6f7fb;position: relative;}
		.d_ctShop-icon {width: 32rpx;height: 32rpx;margin-top: -16rpx;position: absolute;top: 50%;right: 30rpx;}
		.d_ctShop-txt {float: left;}
		.d_ctShop-imgs {overflow: hidden;}
		.d_ctShop-img {width: 66rpx;height: 66rpx;margin: 20rpx 0 0 28rpx;border-radius: 4rpx;background: #fff;overflow: hidden;float: left;}
		.d_cAuth {padding: 0 36rpx;margin-top: 80rpx;}
		.d_caTxt {line-height: 44rpx;color: #939393;font-size: 24rpx;}
	}

	// 评论=====
	.d_evaluate {padding: 40rpx 0;background: #fff;
		.d_eTitle {height: 50rpx;line-height: 50rpx;font-size: 36rpx;font-weight: bold;padding-left: 36rpx;
			& > text {font-size: 24rpx;font-weight: bold;padding-left: 8rpx;}
		}
		.d_eList {padding-left: 32rpx;}
		.d_eItem {margin-top: 30rpx;
			&:nth-last-child(1) .p_eCont::after {content: none;}
		}
		.d_eHead, .d_eIts .d_eiHead {width: 66rpx;height: 66rpx;margin-right: 16rpx;border-radius: 50%;background: #f0f0f0;float: left;}
		.d_eCont {padding-bottom: 28rpx;position: relative;overflow: hidden;
			&::after {content: "";width: 100%;height: 1px;background: #f4f4f4;position: absolute;bottom: 0;left: 0;transform: scaleY(.5);}
		}
		.d_eName, .d_eIts .d_eiName {height: 28rpx;line-height: 28rpx;color: #939393;font-size: 20rpx;		}
		.d_eAuth, .d_eIts .d_eiAuth {width: 64rpx;height: 28rpx;line-height: 28rpx;text-align: center;color: #333;font-size: 20rpx;margin-left: 8rpx;border-radius: 28rpx;background: #f6f7fb;display: inline-block;}
		.d_eTxt, .d_eIts .d_eiTxt {min-height: 34rpx;line-height: 34rpx;font-size: 24rpx;padding-right: 32rpx;margin-top: 4rpx;}
		.d_eTip, .d_eIts .d_eiTip {color: #939393;font-size: 20rpx;padding-left: 16rpx;display: inline-block;}
		// 他人回复
		.d_eiItem {margin-top: 16rpx;}
		.d_eiCont {overflow: hidden;}
		.d_eiReply {color: #939393;font-size: 20rpx;padding: 0 4rpx;}
	}

	// 评论框=====
	.d_talk {
		.d_tShim {height: 96rpx;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
		.d_tBox {width: 100vw;height: 96rpx;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);background: #fff;position: fixed;bottom: 0;left: 0;z-index: 101;box-shadow: 0 0 12rpx 0 rgba(155, 155, 155, .16);}
		.d_tFuns {padding-left: 30rpx;float: right;}
		.d_tFun {width: 110rpx;height: 96rpx;float: right;}
		.d_tIcon {width: 40rpx;height: 40rpx;line-height: 40rpx;color: #6c6c6c;font-size: 40rpx;margin: 0 auto;padding-top: 14rpx;box-sizing: content-box;}
		.d_tTxt {height: 28rpx;line-height: 28rpx;text-align: center;color: #939393;font-size: 20rpx;}
		.d_tInput {height: 60rpx;margin: 20rpx 0 0 32rpx;border-radius: 60rpx;overflow: hidden;
			& > input {width: 100%;height: 100%;font-size: 24rpx;padding: 0 28rpx;background: #f6f7fb;}
		}
	}

	// 浮窗按钮=====
	.d_fixed {position: fixed;right: 32rpx;bottom: 220rpx;z-index: 53;
		.d_fBtn {width: 108rpx;height: 108rpx;margin-top: 22rpx;border-radius: 50%;background: #fff;box-shadow: 0 0 20rpx #dedede;overflow: hidden;
			&:active {opacity: .92;}
		}
		.d_fcIcon {width: 40rpx;height: 40rpx;margin: 18rpx auto 0;}
		.d_fcTxt {height: 34rpx;line-height: 34rpx;text-align: center;font-size: 24rpx;}
	}

	// 目录 
	.d_catalog {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 1000;
		visibility: hidden;transition: visibility .3s;
		&.active {visibility: visible;
			.d_cBg {opacity: 1;}
			.d_cContain {transform: translateY(0);}
		}
		.d_cBg {width: 100%;height: 100%;background: rgba(0, 0, 0, .6);opacity: 0;transition: opacity .3s;}
		.d_cContain {width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: flex;flex-flow: column;transition: transform .3s;transform: translateY(100%);}
		.d_cShade {height: 256rpx;}
		.d_cBox {border-radius: 24rpx 24rpx 0 0;background: #fff;position: relative;overflow: hidden;display: flex;flex-flow: column;flex: 1;}
		.d_cClose {width: 40rpx;height: 40rpx;line-height: 40rpx;color: #333;font-size: 40rpx;padding: 16rpx;position: absolute;top: 30rpx;right: 16rpx;box-sizing: content-box;}
		.d_cTitle {height: 50rpx;line-height: 50rpx;text-align: center;font-weight: bold;padding: 40rpx 0 30rpx;box-sizing: content-box;}
		.d_cList {overflow-y: auto;flex: 1;}
		.d_cItem {padding: 30rpx 0;position: relative;}
		.d_cArrow {width: 32rpx;height: 32rpx;line-height: 32rpx;color: #939393;font-size: 32rpx;position: absolute;top: 34rpx;right: 32rpx;}
		.d_cName {height: 40rpx;line-height: 40rpx;font-weight: bold;padding-left: 36rpx;}
		.d_cImgs {padding: 14rpx 0 0 32rpx;overflow: hidden;}
		.d_cImg {width: 220rpx;height: 220rpx;margin: 14rpx 14rpx 0 0;border-radius: 4rpx;background: #f0f0f0;float: left;}
	}
}
.cu-modal{
	    position: fixed;
	    bottom: 0;
	    background: rgba(0,0,0,.5);
	    top: 0;
		display: none;
		 width: 100%;
		 z-index: 500;
}
.show{
	display: block;
}
.bottom-md{
	position: absolute;
	bottom:0;
	background: #fff;
}
.share{
    position: fixed;
    color: #FFFFFF;
    right: 0;
    bottom: 190rpx;
    background: linear-gradient(to bottom right, #FE726B, #FE956B);
    padding: 10rpx 10rpx 10rpx 20rpx;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    box-shadow: 0 0 20upx rgba(0,0,0,.09);
}
.cancel{
  width: 100vw;
  padding: 30rpx;
  text-align: center;
  background: #FFFFFF;
  color: #888;
  font-weight: normal;
  font-size: 30rpx;
}
.md-content{ 
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 50rpx 0;
}
.md-content-item{
  margin: 0 90rpx;
  position: relative;
}
.md-content-item image{
  width: 100rpx;
  height: 100rpx;
  margin: auto;
}
.md-content-item view{
  margin-top: 15rpx;
  font-size: 28rpx;
}
.sharebtn{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}
.md-content-item .s_bIcon{font-size: 72rpx;}
.s_bIcon {width: 112rpx;height: 112rpx;color: #fff;font-size: 140rpx;margin: 60rpx auto 0;border-radius: 50%;background: #8bc37a;box-shadow: 0 0 12rpx rgba(0, 0, 0, .16);display: flex;justify-content: center;align-items: center;}
.s_bIcons{background: #ffd425;}
.i_tBtn {width: 102rpx;height: 102rpx;background: rgba(0, 0, 0, .4);border: 1px solid #fff;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 999;}
.i_tbImg {width: 42rpx;height: 42rpx;margin: 20rpx auto 0;}
.i_tbTxt {width: 100%;height: 34rpx;line-height: 34rpx;text-align: center;color: #fff;font-size: 24rpx;position: absolute;top: 58rpx;left: 0;}
</style>